<template>
	<div class="design-screen">
		<div class="design-screen-head">
			<div class="design-screen-head-text" v-if="spread">{{i18n("index.layerManager","图层管理")}}</div>
			<div class="design-screen-head-get" @click="spreadClick">
				<rx-icon-show style="color: #8e8e8e"
						 :icon="spread?'icon-lineicon-test39':'icon-lineicon-test41'"></rx-icon-show>
			</div>
		</div>
		<div class="design-screen-common">
			<ul>
				<div v-for="(time,index) in dataList" :key="index">
					<div v-if="time.chlid" @click="pitchOn(time.id,true)">
						<li :title="time.name" class="design-screen-common-li" :class="[fliter(time.id)?'design-screen-common-li-hover':'']">
							<rx-icon-show style="font-size: 20px" :icon="time.icon"></rx-icon-show>
							<a-input @blur="onBlur(time)" v-model:value="time.name" v-if="doubleId.id==time.id"/>
							<span v-else-if="spread" @dblclick.stop="dblclick(time)">{{ time.name }}</span>
							<rx-icon-show
								:icon="!fliter(time.id)?'iconjiantou_liebiaoxiangyou':'iconjiantou_liebiaozhankai'"></rx-icon-show>
						</li>
						<template v-if="fliter(time.id) && spread">
							<div v-for="(timeChlid,index1) in time.chlid" :key="index1">
								<li :title="timeChlid.name" style="padding-left: 25px" @click.stop="pitchOnChild(time.id,timeChlid.id)" class="design-screen-common-li" :class="[fliter(timeChlid.id)?'design-screen-common-li-hover':'']">
									<rx-icon-show :icon="timeChlid.icon"></rx-icon-show>
									<span>{{ timeChlid.name }}</span></li>
							</div>
						</template>
					</div>
					<li v-else :title="time.name" @click="pitchOn(time.id,false)" class="design-screen-common-li"
						:class="[fliter(time.id)?'design-screen-common-li-hover':'']">
						<rx-icon-show style="font-size: 20px" :icon="time.icon"></rx-icon-show>
						<span v-if="spread">{{ time.name }}</span></li>
				</div>
			</ul>
		</div>
	</div>
</template>

<script>
import allComponents from "@/views/modules/design/js/all-components.js";
import {debounce} from "lodash-es";

export default {
	name: "left-design",
	props: {
		spread: {
			type:Boolean,
			default:false
		},
		screenConfig: {
			type: Object
		}
	},
	data() {
		return {
			//所有组件
			componentList: allComponents,
			dataList: [],
			key: [],//选中的控件
			isShift: false,
			doubleId:{
				id:'',
				name:'',
			},

		}
	},
	mounted() {
		document.addEventListener("keydown", this.handKeyDown)
		document.addEventListener("keyup", this.handKeyUp)
	},
	methods: {
		i18n(name,text,key){
			return this.$ti18(name,text,"designLang",key);
		},
		onBlur(time){
			 this.doubleId.name = time.name;
			this.$emit('onBlur',this.doubleId)
			this.doubleId.id = '';
		},
		dblclick(itme){
			this.doubleId={
				id:itme.id,
				name:itme.name
			}
		},
		init:debounce(function () {
			this.dataList = [];
			this.key = [];
			for (let i = 0; i < this.screenConfig.components.length; i++) {
				let component = this.screenConfig.components[i];
				let obj = {}
				if(component.active){
					this.key.push(component.id)
				}
				if (component.config) {
					obj = {
						name: component.config ? component.config.title : '',
						icon: this.getIcon(this.componentList, component.type, component.config.chartType),
						id: component.id
					}
				} else if (component.child) {
					obj = {
						name: component.name,
						icon: 'iconzuhe',
						id: component.id,
						chlid: this.chlidList(component.child),
					}
				}
				this.dataList.push(obj);
			}
		}, 500),
		chlidList(list) {
			let obj = [];
			list.filter(res => {
				if(res.active){
					this.key.push(res.id)
				}
				obj.push({
					name: res.config ? res.config.title : '',
					icon: this.getIcon(this.componentList, res.type, res.config.chartType),
					id: res.id
				})
			})
			return obj
		},
		getIcon(componentList, type, chartType) {
			let icon = "";
			if (type == "chart") {
				for (let i = 0; i < componentList.length; i++) {
					if (componentList[i].chartType && componentList[i].chartType == chartType) {
						icon = componentList[i].icon;
						break;
					}
					if (componentList[i].childList && componentList[i].childList.length > 0) {
						icon = this.getIcon(componentList[i].childList, type, chartType);
						if (icon) {
							break;
						}
					}
				}
			} else {
				for (let i = 0; i < componentList.length; i++) {
					if (componentList[i].type == type) {
						icon = componentList[i].icon;
						break;
					}
					if (componentList[i].childList && componentList[i].childList.length > 0) {
						icon = this.getIcon(componentList[i].childList, type, "");
						if (icon) {
							break;
						}
					}
				}
			}
			return icon;
		},
		spreadClick() {
			this.$emit('spreadClick')
		},
		pitchOnChild(id,_id){
			this.key = [];
			this.key.push(id)
			this.key.push(_id)
			this.$emit('pitchOnKey',this.key)
		},
		//选中图层
		pitchOn(id) {
			if(!this.isShift && this.key[0] ==id){
				this.key = []
				this.$emit('pitchOnKey',this.key)
				return
			}else if(!this.isShift){
				this.key = []
			}
			if(this.key.indexOf(id)>=0){
				for (let i = 0; i < this.key.length; i++) {
					if(this.key[i] ==id){
						this.key.splice(i,1)
					}
				}
			}else{
				this.key.push(id)
			}
			this.$emit('pitchOnKey',this.key)
		},
		handKeyDown(e) {
			this.isShift = e.shiftKey;
		},
		handKeyUp() {
			this.isShift = false;
		},
		fliter(id) {
			if (this.key.indexOf(id) >= 0) {
				return true
			} else {
				return false
			}
		}
	},
	watch: {
		screenConfig: {
			handler: function () {
				this.init();
			},
			deep: true
		},
	}
}
</script>

<style scoped>
.design-screen {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.design-screen-common-li {
	height: 40px;
	display: flex;
	align-items: center;
	cursor: pointer;
    margin-bottom: 5px;
}

.design-screen-common-li:hover {
	background-color: #eff5ff;
}

.design-screen-common-li-hover {
	background-color: #eff5ff;
}

.design-screen-common-li i {
	margin-left: 24px;
	font-size: 20px;
}

.design-screen-common-li span {
	font-size: 14px;
	color: #333333;
	margin-left: 8px;
	font-style: initial;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
    margin-right: 5px;
}

.design-screen-common {
	margin-top: 16px;
	flex: 1;
	overflow: auto;
}

.design-screen-head-get {
	width: 24px;
	height: 24px;
	text-align: center;
	line-height: 24px;
	background-color: #f1f1f3;
	border-radius: 4px;
	cursor: pointer;
}

.design-screen-head-text {
	flex: 1;
	font-size: 14px;
	color: #333333;
	font-weight: bold;
}

.design-screen-head {
	height: 50px;
	display: flex;
	padding:0px 10px;
	align-items: center;
	border-bottom: 1px solid #dedede;
}
</style>
